<%--
  Author      : MadFrog
  Date        : 2018/12/12 22:10
  Description : Message创建页面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!--移动优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="a message add page">
    <meta name="author" content="MadFrog">
    <title>编辑消息</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/resources/bootstrap3/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/resources/jquery-cropper/cropper.css">

    <!-- Scripts -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/ueditor/ueditor.all.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.bootcss.com/jquery-confirm/3.3.1/jquery-confirm.min.js"></script>
    <style>
        /*#ueditor_div{*/
            /*height: 500px;*/
        /*}*/
        /*#editor{*/
            /*height: 570px;*/
        /*}*/
    </style>
</head>
<body>
<div class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-md-5"></div>
            <div class="col-md-2">
                <h3 class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;创建信息</h3>
            </div>
            <div class="col-md-5"></div>
        </div>
        <div class="form-group">
            <div class="col-md-3"></div>
            <label for="title" class="col-md-1 control-label">标题</label>
            <div class="col-md-5">
                <input type="text" class="form-control" id="title" placeholder="请输入标题"/>
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group">
            <div class="col-md-3"></div>
            <label for="category" class="col-md-1 control-label">类别</label>
            <div class="col-md-5">
                <select id="category" class="form-control">
                    <option value="WECHAT">微信</option>
                    <option value="MAJOR">专业介绍</option>
                    <option value="NEWS">系部新闻</option>
                </select>
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group">
            <div class="col-md-3"></div>
            <label for="summary" class="col-md-1 control-label">摘要</label>
            <div class="col-md-5">
                <textarea class="form-control" id="summary" placeholder="请输入摘要" rows="4"></textarea>
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group">
            <div class="col-md-3"></div>
            <label for="category" class="col-md-1 control-label">预览图</label>
            <div class="col-md-5">
                <img id="image">
            </div>
            <div class="col-md-3">
                <input type="text" id="previewPath" hidden="hidden" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-4"></div>
            <div class="col-md-5 row">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <%--<label class="btn btn-primary" for="imageFile" title="上传图片">--%>
                    <%--<input type="file" class="sr-only" id="imageFile" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff" onclick="browseImage();"/>--%>
                    <%--<span title="浏览电脑里的照片">--%>
                        <%--<span>浏览</span>--%>
                    <%--</span>--%>
                <%--</label>--%>
                <button class="btn btn-primary" data-target="#continue_modal" data-toggle="modal">浏览</button><br/>
                <%--<button type="button" class="btn btn-success" onclick="crop();">--%>
                    <%--<span data-animation="false">--%>
                      <%--裁剪并上传--%>
                    <%--</span>--%>
                <%--</button>--%>
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group">
            <div class="col-md-3"></div>
            <label for="category" class="col-md-1 control-label">内容</label>
            <div class="col-md-5"></div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group" id="ueditor_div">
            <div class="col-md-3"></div>
            <div class="col-md-6" id="editor"></div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group">
            <div class="col-md-5"></div>
            <div class="col-md-2">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-large btn-success"  onclick="commit();">提交</button>
            </div>
            <div class="col-md-5"></div>
        </div>
        <div class="form-group">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div id="prompt" class="alert alert-danger alert-dismissible hide">
                    <strong>警告！</strong><span id="prompt_text"></span>
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>
    </form>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="continue_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        温馨提示
                    </h4>
                </div>
                <div class="modal-body">
                    提交成功！是否继续添加？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="noContinue();">否</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="yesContinue();">是</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title text-primary">
                        <i class="fa fa-pencil"></i>
                        更换头像
                    </h4>
                </div>
                <%--<div class="modal-body">--%>
                    <%--<p class="tip-info text-center">--%>
                        <%--未选择图片--%>
                    <%--</p>--%>
                    <%--<div class="img-container hidden">--%>
                        <%--<img src="" alt="" id="photo">--%>
                    <%--</div>--%>
                    <%--<div class="img-preview-box hidden">--%>
                        <%--<hr>--%>
                        <%--<span>150*150:</span>--%>
                        <%--<div class="img-preview img-preview-lg">--%>
                        <%--</div>--%>
                        <%--<span>100*100:</span>--%>
                        <%--<div class="img-preview img-preview-md">--%>
                        <%--</div>--%>
                        <%--<span>30*30:</span>--%>
                        <%--<div class="img-preview img-preview-sm">--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <div class="modal-footer">
                    <label class="btn btn-danger pull-left" for="photoInput">
                        <input type="file" class="sr-only" id="photoInput" accept="image/*">
                        <span>打开图片</span>
                    </label>
                    <button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交</button>
                    <button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>



</body>

<!--bootstrap-->
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="${ctx}/resources/bootstrap3/bootstrap.js"></script>
<!--jQuery-cropper-->
<script src="https://fengyuanchen.github.io/js/common.js"></script>
<script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
<script src="${ctx}/resources/jquery-cropper/jquery-cropper.js"></script>
<script>
    // UEditor初始化
    var ue = UE.getEditor('editor', {
        initialFrameHeight: 600,
    });

    var initCropperInModal = function(img, input, modal){
        var $image = img;
        var $inputImage = input;
        var $modal = modal;
        var options = {
            aspectRatio: 1, // 纵横比
            viewMode: 2,
            preview: '.img-preview' // 预览图的class名
        };
        // 模态框隐藏后需要保存的数据对象
        var saveData = {};
        var URL = window.URL || window.webkitURL;
        var blobURL;
        $modal.on('show.bs.modal',function () {
            // 如果打开模态框时没有选择文件就点击“打开图片”按钮
            // if(!$inputImage.val()){
            //     $inputImage.click();
            // }
        }).on('shown.bs.modal', function () {
            // 重新创建
            // $image.cropper( $.extend(options, {
            //     ready: function () {
            //         // 当剪切界面就绪后，恢复数据
            //         if(saveData.canvasData){
            //             $image.cropper('setCanvasData', saveData.canvasData);
            //             $image.cropper('setCropBoxData', saveData.cropBoxData);
            //         }
            //     }
            // }));
        }).on('hidden.bs.modal', function () {
            // 保存相关数据
            saveData.cropBoxData = $image.cropper('getCropBoxData');
            saveData.canvasData = $image.cropper('getCanvasData');
            // 销毁并将图片保存在img标签
            $image.cropper('destroy').attr('src',blobURL);
        });
        if (URL) {
            $inputImage.change(function() {
                var files = this.files;
                var file;
                if (!$image.data('cropper')) {
                    return;
                }
                if (files && files.length) {
                    file = files[0];
                    if (/^image\/\w+$/.test(file.type)) {

                        if(blobURL) {
                            URL.revokeObjectURL(blobURL);
                        }
                        blobURL = URL.createObjectURL(file);

                        // 重置cropper，将图像替换
                        $image.cropper('reset').cropper('replace', blobURL);

                        // 选择文件后，显示和隐藏相关内容
                        $('.img-container').removeClass('hidden');
                        $('.img-preview-box').removeClass('hidden');
                        $('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');
                        $('#changeModal .tip-info').addClass('hidden');

                    } else {
                        window.alert('请选择一个图像文件！');
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).addClass('disabled');
        }
    }

    var sendPhoto = function(){
        $('#photo').cropper('getCroppedCanvas',{
            width:300,
            height:300
        }).toBlob(function(blob){
            // 转化为blob后更改src属性，隐藏模态框
            $('#user-photo').attr('src',URL.createObjectURL(blob));
            $('#changeModal').modal('hide');
        });
    }

    $(function(){
        initCropperInModal($('#photo'),$('#photoInput'),$('#continue_modal'));
    });




    var $image;
    var options = {
        aspectRatio: 8/5,
        preview: '.img-preview',
        guides : false, // 裁剪框的虚线(九宫格)
        autoCrop: true,
        autoCropArea : 0.9, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        dragCrop : true, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        movable : true, // 是否允许移动剪裁框
        resizable : true, // 是否允许改变裁剪框的大小
        zoomable : true, // 是否允许缩放图片大小
        mouseWheelZoom : true, // 是否允许通过鼠标滚轮来缩放图片
        rotatable : true, // 是否允许旋转图片
        build : function () {
            // var container = $(".cropper-container, .cropper-bg")[0];
            // var width = container.width();
            // container.height(width*5/8);
            alert("build");
        },
        built : function () {
            // var container = $(".cropper-container, .cropper-bg")[0];
            // var width = container.width();
            // container.height(width*5/8);
            alert("built");
        }
    };
    $(function () {
        $image = $('#image');
        $image.cropper(options);
        $image.on('built.cropper', function (e) {
            // var container = $(".cropper-container, .cropper-bg")[0];
            // var width = container.width();
            // container.height(width*5/8);
            alert("built");
        });
        $image.on('build.cropper', function (e) {
            // var container = $(".cropper-container, .cropper-bg")[0];
            // var width = container.width();
            // container.height(width*5/8);
            alert("build");
        });
    });

    // 用户点"浏览"的时候时触发
    function browseImage() {
        // Window.URL 属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。它也可以作为一个构造函数被调用来构造 URL 对象。
        var URL = window.URL || window.webkitURL;
        var $inputImage = $('#imageFile');
        var uploadedImageURL;
        var uploadedImageName = 'cropped.jpg';
        if (URL) {
            $inputImage.change(function () {
                var files = this.files;
                var file;
                if (!$image.data('cropper')) {
                    return;
                }
                if (files && files.length) {
                    file = files[0];
                    if (/^image\/\w+$/.test(file.type)) {
                        uploadedImageName = file.name;
                        if (uploadedImageURL) {
                            URL.revokeObjectURL(uploadedImageURL);
                        }
                        uploadedImageURL = URL.createObjectURL(file);
                        $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                        $inputImage.val('');
                    } else {
                        window.alert('请选择图片！');
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).parent().addClass('disabled');
        }
    }

    // 用户点击"裁剪并上传"时触发
    function crop() {
        var result = $image.cropper("getCroppedCanvas", {
            width : 480,
            height : 300,
            fillColor : '#000'
        });
        if (result) {
            // 得到PNG格式的dataURL
            var photo = result.toDataURL('image/png');
            $.ajax({
                url: "${ctx}/admin/message/snapshoot/upload", // 要上传的地址
                type: 'POST',
                data: {
                    'imageData': photo
                },
                dataType: 'json',
                success: function (resp) {
                    if (resp.success == true) {
                        var preview = resp.data;
                        $("#previewPath").val(preview);
                        // 停止copper
                        $image.cropper("destroy");
                        // 修改图片源
                        $image.attr('src', preview);
                    }
                }
            });
        }
    }

    function commit() {

        var $prompt = $("#prompt");
        var $prompt_text = $("#prompt_text");

        var title = $("#title").val().trim();
        if(title==null||title==undefined||title==""){
            $prompt_text.html("标题不能为空！");
            $prompt.removeClass('hide').addClass('in');
            return;
        }
        var category = $("#category").val();
        if(category==null||category==undefined||category==""){
            $prompt_text.html("类型不能为空！");
            $prompt.removeClass('hide').addClass('in');
            return;
        }
        var summary = $("#summary").val().trim();
        if(summary==null||summary==undefined||summary==""){
            $prompt_text.html("摘要不能为空！");
            $prompt.removeClass('hide').addClass('in');
            return;
        }
        var preview = $("#previewPath").val();
        if(preview==null||preview==undefined||preview==""){
            $prompt_text.html("预览图片不能为空！");
            $prompt.removeClass('hide').addClass('in');
            return;
        }
        var content = ue.getContent().trim();
        if(content==null||content==undefined||content==""){
            $prompt_text.html("内容不能为空！");
            $prompt.removeClass('hide').addClass('in');
            return;
        }
        var params = {};
        params.title = title;
        params.category = category;
        params.summary = summary;
        params.preview = preview;
        params.content = content;
        $.ajax({
            type : "post",
            url : "${ctx}/admin/message/create",
            data : params,
            dataType: "json",
            success: function (re) {
                if (true == re.success) {
                    $('#continue_modal').modal("show");

                } else {
                    $prompt_text.html("服务器错误，请联系管理员！");
                    $prompt.removeClass('hide').addClass('in');
                }
            },
            error: function (re) {
                $prompt_text.html("网络请求失败，请检查网络或地址！");
                $prompt.removeClass('hide').addClass('in');
            }
        });
        
    }
    
    function noContinue() {
        window.location.href="about:blank";
        window.close();
        window.close();
    }
    function yesContinue() {
        window.location.reload()
    }

</script>
</html>
